<script lang="ts" setup>
import PageHeader from '../../../../components/page-header.vue';
import { INIT_PARAMS, PAGE_SIZE } from '../../../../constants';
import { useTable } from './useTable';
import { useF9Context } from '@/views/modules/enterprise/use/use-context';
import { getGreenBondProjectF9, type IGreenBondProject } from '@/views/modules/enterprise/apis';

interface Props {
  title: string;
  menuId: string;
}

const { title, menuId } = defineProps<Props>();
const { companyId } = useF9Context();

const requestParams = reactive<IGreenBondProject>({
  companyId,
  pageNum: 1,
  ...INIT_PARAMS
});

const totalNum = ref(0);
let tableData = $ref([]);

const { run, loading, error } = useRequest(getGreenBondProjectF9, {
  defaultParams: [requestParams],
  onSuccess: (data) => {
    totalNum.value = data?.total;
    tableData = data?.values;
  }
});

const { columns } = useTable();

const handlePageChange = (val) => {
  requestParams.pageNum = val;
  run(requestParams);
};
</script>
<template>
  <page-header class="mt-18px mb-15px" :title="title" :menuId="menuId" is-small />
  <vc-empty-fail @click="run(requestParams)" v-if="error" />
  <div class="container" v-else>
    <vc-table :loading="loading" :tableData="tableData" :columns="columns" :total="totalNum" :pageSize="PAGE_SIZE" v-model:pageNum="requestParams.pageNum" @page-change="handlePageChange" />
  </div>
</template>
